import { FC, useState } from 'react';
import classnames from 'classnames';
import Image from '@/components/Image';

import bgLeft from '@/assets/button_bg_left.png';
import bgRight from '@/assets/button_bg_right.png';
import bgLeftSmall from '@/assets/button_bg_left_small.png';
import bgRightSmall from '@/assets/button_bg_right_small.png';

import styles from './style.less';

interface Iprops {
  size?: '1x' | '2x' | '3x';
  dataSource: any[];
  hasBg?: boolean;
  smallBg?: boolean;
  onChange?: (v: any, index: number) => void;
  currentIndex?: number;
}
const setSizeClass = (size?: '1x' | '2x' | '3x') => {
  switch (size) {
    case '1x':
      return styles.item_1x;
    case '2x':
      return styles.item_2x;
    case '3x':
      return styles.item_3x;
    default:
      return styles.item_1x;
  }
};
const TabList: FC<Iprops> = (props) => {
  const {
    size,
    dataSource,
    onChange,
    hasBg,
    smallBg,
    currentIndex = 0,
  } = props;
  const itemHandler = (v: any, index: number) => {
    onChange && onChange(v, index);
  };
  return (
    <div
      className={classnames(
        styles.tab_container,
        hasBg ? styles.has_bg : null,
        smallBg ? styles.is_small : null,
      )}
    >
      {hasBg && (
        <Image
          src={smallBg ? bgLeftSmall : bgLeft}
          className={classnames(styles.bg_img, styles.left)}
        />
      )}
      {dataSource.map((item: any, index: number) => (
        <div
          className={classnames(
            styles.tab_item,
            setSizeClass(size),
            currentIndex === index ? styles.actived : null,
          )}
          key={`${item.name}_${index}`}
          onClick={() => itemHandler(item, index)}
        >
          <span>{item.name}</span>
        </div>
      ))}
      {hasBg && (
        <Image
          src={smallBg ? bgRightSmall : bgRight}
          className={classnames(styles.bg_img, styles.right)}
        />
      )}
    </div>
  );
};
export default TabList;
